/*
 {rows:0, columns:6,columngutter:20,opacity:30,color:'#ffb1b1'}
 */
 
$.fn.phormgrid = function(options) {
	this.css('position','relative');
	var defaults = { rows: 0, rowheight: 0, rowgutter: 0, columns: 6, columnwidth: 0, columngutter: 20, color: '#ffb1b1', opacity: 30, basefont:14, baseline:1.5};
	var opts = $.extend(defaults, options); 
	var o = $.meta ? $.extend({}, opts, $$.data()) : opts;
	
	var width = this.width(); 
	var height = $(document).height();
	var baseline = (o.basefont*o.baseline); // это высота базовой линии в px
	var line = height / baseline;
	
	//if(o.columnwidth == 0) o.columnwidth = Math.floor(96)/o.columns;
	
	//скелет сетки
	this.prepend("<div class='phormgrid' style='top:-"+6+"px;height:"+height+"px;'><div class='phormgrid2'></div><div class='phormgrid3'></div><div class='phormgrid4'></div><div class='phormgrid6'></div><div class='phormgrid8'></div><div class='phormgrid12'></div><div class='phormgrid-columns'><div class='phormgrid-rows'></div></div></div>");

	//базовые линии
	for ( var i = 0; i < line; i++ ) { 
	$('.phormgrid-columns').append("<div class='baseline' style='height:"+baseline+"px;'><span>"+(i+1)+"</span></div>");
	}
	
	//Горизонтальное деление
	 if(o.rowheight != 0) {
		o.rows = height / (baseline*o.rowheight*2); 
		for ( var i = 0; i < o.rows; i++ ) { 
			$('.phormgrid-rows',this).append("<div style='height:"+(baseline*o.rowheight)+"px;margin-bottom:"+(baseline*o.rowheight)+"px;'></div>");
		}
	 }


	//2 колонки
	for ( var i = 0; i < 2; i++ ) { 
			$('.phormgrid2',this).append("<div style='width:48%;height:100%;display:block;float:left;position:relative;'><div class='phormgrid_column_pad' style='margin-right:"+10+"px; margin-left:"+10+"px;'></div></div>");
		}
	//3 колонки
	for ( var i = 0; i < 3; i++ ) { 
			$('.phormgrid3',this).append("<div style='width:32%;height:100%;display:block;float:left;position:relative;'><div class='phormgrid_column_pad' style='margin-right:"+10+"px; margin-left:"+10+"px;'></div></div>");
		}
	//4 колонки
	for ( var i = 0; i < 4; i++ ) { 
			$('.phormgrid4',this).append("<div style='width:24%;height:100%;display:block;float:left;position:relative;'><div class='phormgrid_column_pad' style='margin-right:"+10+"px; margin-left:"+10+"px;'></div></div>");
		}
	//6 колонки
	for ( var i = 0; i < 6; i++ ) { 
			$('.phormgrid6',this).append("<div style='width:16%;height:100%;display:block;float:left;position:relative;'><div class='phormgrid_column_pad' style='margin-right:"+10+"px; margin-left:"+10+"px;'></div></div>");
		}
	//8 колонки
	for ( var i = 0; i < 8; i++ ) { 
			$('.phormgrid8',this).append("<div style='width:12%;height:100%;display:block;float:left;position:relative;'><div class='phormgrid_column_pad' style='margin-right:"+10+"px; margin-left:"+10+"px;'></div></div>");
		}
	//12 колонки
	for ( var i = 0; i < 12; i++ ) { 
			$('.phormgrid12',this).append("<div style='width:8%;height:100%;display:block;float:left;position:relative;'><div class='phormgrid_column_pad' style='margin-right:"+10+"px; margin-left:"+10+"px;'></div></div>");
		}
	
	
//панель управления
	
	$('body').prepend("<div id='grid-options'><div class='grid'><a class='grid-home' href='http://modulargrid.ru/'>MODULARGRID.RU</a><span id='showgridoptions' class='button' style='width:154px'>Показать параметры</span><span id='showgrid' class='button' style='width:120px'>Показать сетку</span><span id='basecol'><input type='radio' id='basecol0' name='basecol' /><label for='basecol0'>Колонки: 0</label><input type='radio' id='basecol2' name='basecol' /><label for='basecol2' id='2'>2</label><input type='radio' id='basecol3' name='basecol'  /><label for='basecol3' id='3'>3</label><input type='radio' id='basecol4' name='basecol' /><label for='basecol4' id='4'>4</label><input type='radio' id='basecol6' name='basecol' checked='checked'/><label for='basecol6' id='6'>6</label><input type='radio' id='basecol8' name='basecol' /><label for='basecol8' id='8'>8</label><input type='radio' id='basecol12' name='basecol' /><label for='basecol12' id='12'>12</label></span><span >Высота строк: <input id='rowheightgrid' name='rowheightgrid' type='text' size='2' value='0'>b-line </span></div></div>");

//Параметры сетки

$('#grid-options .grid').append("<div class='phormgrid-option' style='display:none;z-index:100;'><div class='grid3'>Oсновной шрифт<input class='text2' id='base_font_family' name='base_font_family' type='text' value='Helvetica'><br>Кегель основного шрифта<input class='text' id='base_font' name='base_font' type='text' value='14'>px<br>Высота строки<input class='text' id='base_line_height' name='base_line_height' type='text' value='150'>%<br>Межколонник<input class='text' id='column_pad' name='column_pad' type='text' value='1.5'>em (галка constant)</div><div class='grid3'>Поля сверху / снизу<input class='text' id='layout_top' name='layout_top' type='text' value='0'>em<br>Поля слева / справа<input class='text' id='layout_left' name='layout_left' type='text' value='0'>em</div><div class='grid3'>Сдвиг базовых линий<input class='text' id='base_line_pad' name='base_line_pad' type='text' value='6'>px</div><div class='grid4-3'><span class='button' id='set_h1-btn'>H1</span><span class='button' id='set_h2-btn'>H2</span><span class='button' id='set_h3-btn'>H3</span><span class='button'id='set_h4-btn'>H4</span><span class='button' id='set_h5-btn'>H5</span><span class='button' id='set_h6-btn'>H6</span> <span> Укажите класс элемента:<input id='input-class' name='input-class' type='text' size='12' value=''> </span> <span class='button' id='set_class-btn'>Настроить</span></div><div class='clear'></div></div>");

};


//функции панели управления

//показать скрыть сетку
function ShowGrid() {
$('.phormgrid').toggle();
var label = $( "#showgrid" ).button( "option", "label" );
if(label == "Показать сетку"){
	$( "#showgrid" ).button( "option", "label", "Скрыть сетку" );
	$( "#showgrid" ).fadeTo(30,0.8);
	$('#basecol > input').button({disabled:false});
	//$('#rowheightgrid').button({disabled:false});
}else{
	$( "#showgrid" ).button( "option", "label", "Показать сетку" );
	$( "#showgrid" ).fadeTo(30,1);
	$('#basecol > input').button({disabled:true});
	//$('#rowheightgrid').button({disabled:true});
}
	}

//показать скрыть параметры сетки
function ShowGridOptions() {
	$('.phormgrid-option').toggle();
	var label = $( "#showgridoptions" ).button( "option", "label" );
	if(label == "Показать параметры"){
		$( "#showgridoptions" ).button( "option", "label", "Скрыть параметры" );
		$( "#showgridoptions" ).fadeTo(30,0.8);
	}else{
		$( "#showgridoptions" ).button( "option", "label", "Показать параметры" );
		$( "#showgridoptions" ).fadeTo(30,1);
	}
}

// демонстрация колонок
function setGridView(n) {
	$('.phormgrid2').hide();
	$('.phormgrid3').hide();
	$('.phormgrid4').hide();
	$('.phormgrid6').hide();
	$('.phormgrid8').hide();
	$('.phormgrid12').hide();
	$('.phormgrid'+n).show();
	
	}
	
//Функция изменения горизонтального деления
function setRowHeight() {
	var rowheight = parseInt($("input#rowheightgrid").attr("value"));
	$('.phormgrid-rows div').remove();
	if(rowheight!=0){
		var base_font = parseInt($("input#base_font").attr("value"));
		var base_line_height = parseInt($("input#base_line_height").attr("value"));
		var base_line_height_em = base_line_height/100;
		var height = $(document).height();
		var rows = Math.floor(height / (base_font*base_line_height_em*rowheight*2)); 
		for ( var i = 0; i < rows; i++ ) { 
			$('.phormgrid-rows').append("<div style='height:"+(base_font*base_line_height_em*rowheight)+"px;margin-bottom:"+(base_font*base_line_height_em*rowheight)+"px;'></div>");
		}
	}
}

//Функция jткрывающая диалоговые кокна для редактирования параметров элементов
function setAndopenDialog(element) {
	//блокируем кнопку
	$('#set_'+element+'-btn').button({disabled:true});
	if(element=="class") {
		var element = $("#input-class").val(); 
		var elementname="."+element; 
		var btn="class";
		}else {
		var btn=element, elementname=element ;
		} 
	//получаем параметры элемента
	var font_family = $(elementname).css( "font-family" );
	var font_size = parseInt($(elementname).css( "font-size" ));
	var line_height = parseInt($(elementname).css( "line-height" ));
	line_height=Math.round(line_height/font_size*100);
	var top = parseInt($(elementname).css( "padding-top" ));
	var bottom = parseInt($(elementname).css( "padding-bottom" ));
	//добавляем элементы диалога
$("body").append("<div id='set_"+element+"' title='Параметры элемента \""+element+"\"'>Шрифт<input class='text2' id='font_family' name='font_family' type='text' value=\""+font_family.replace('"', "")+"\"><br>Кегель <input class='text' id='font_size' name='font_size' type='text' value='"+font_size+"'>px<br>Высота строки<input class='text' id='line_height' name='line_height' type='text' value='"+line_height+"'>%<br>Отступ сверху<input class='text' id='top' name='top' type='text' value='"+top+"'>px<br>Отступ снизу<input class='text' id='bottom' name='bottom' type='text' value='"+bottom+"'>px<br><input id='element' type='hidden' value='"+elementname+"'></div>");
	//создаем диалог
	$('#set_'+element).dialog({
					autoOpen: false,
					width: 400,
					resizable: false,
					zIndex: 9999,
					beforeClose: function() { $("#set_"+element+"").remove(); $('#set_'+btn+'-btn').button({disabled:false}); },
					buttons: {
						"Закрыть": function() {
							$(this).dialog("close");
							//добавить функцию удаления содержимого диалога
							$("#set_"+element+"").remove();
							//разблокируем кнопку
							$('#set_'+btn+'-btn').button({disabled:false});
						}
					}
	});
	//открываем диалог
	$('#set_'+element).dialog('open');
	//$('.ui-dialog').css({"position":"fixed"}); // прилепил диалог чтоб не скролился
	//редактирование параметров текста
			$("input#font_family").keyup( function() { setTextOption($(this).parent().attr('id'));});
			$("input#font_size").keyup( function(){ setTextOption($(this).parent().attr('id'));});
			$("input#line_height").keyup( function(){ setTextOption($(this).parent().attr('id'));});
			$("input#top").keyup( function(){ setTextOption($(this).parent().attr('id'));});
			$("input#bottom").keyup( function(){ setTextOption($(this).parent().attr('id'));});
	};


//Функция настройки текста
function setTextOption(id) {
	  var element = $("#"+id+" input#element").attr("value");
	  var font_family = $("#"+id+" input#font_family").val();
	  var font_size = parseInt($("#"+id+" input#font_size").attr("value"));
	  var line_height = parseInt($("#"+id+" input#line_height").attr("value"))/100;
	  var top = parseInt($("#"+id+" input#top").attr("value"));
	  var bottom = parseInt($("#"+id+" input#bottom").attr("value"));
	  
$(element).css({fontFamily: font_family , "font-size": font_size+"px","line-height": line_height +"em","padding-top":top+"px", "padding-bottom":bottom+"px"});
	}



//генератор параметров сетки


function setLayoutTop() {
  var layout_top = parseInt($("input#layout_top").attr("value"));
  $("#layout").css({ 
  "margin-top": layout_top+"em" , "margin-bottom": layout_top+"em" 
  });
}

function setLayoutLeft() {
  var layout_left = parseInt($("input#layout_left").attr("value"));
  $("#layout").css({ 
  "margin-left": layout_left+"em" , "margin-right": layout_left+"em" 
  });
}


function setBaseLinePad() {
  var base_line_pad = parseInt($("input#base_line_pad").attr("value"));
  $(".phormgrid").css({ 
  "top": "-"+base_line_pad+"px"
  });
}

function setFontFamily() {
  var base_font_family = $("input#base_font_family").attr("value");
$("body").css({"font-family": base_font_family});
}


function setBaseLine() {
  var base_font = parseInt($("input#base_font").attr("value"));
  var base_line_height = parseInt($("input#base_line_height").attr("value"));
  var base_line_height_em = base_line_height/100;
 
 var grtop = Math.floor(((base_font*base_line_height_em)/2) - (base_font/2) + base_font*0.22); //0.22 - коэффициэнт для Гельветики
 
$(".phormgrid").css({"top": "-"+grtop+ "px"});
$("input#base_line_pad").attr("value", grtop);  
$("input#column_pad").attr("value", base_line_height_em);  

$(".phormgrid-columns div").css({"height": base_line_height_em+"em"});

$(".grid-pad").css({"margin-bottom": base_line_height_em+"em", "margin-left": (base_line_height_em/2)+"em", "margin-right": (base_line_height_em/2)+"em"});
console.log(base_line_height_em, base_line_height_em-0.5);
//$(".grid-bg").css({"margin-bottom": (base_line_height_em*10-5)/10+"em", "margin-left": 0,  "margin-right": 0, "padding-left": (base_line_height_em/2)+"em", "padding-right": (base_line_height_em/2)+"em"});
$(".grid-bg").css({"margin-bottom":  Math.ceil((base_line_height_em-0.5)*base_font)+"px", "margin-left": 0,  "margin-right": 0, "padding-left": (base_line_height_em/2)+"em", "padding-right": (base_line_height_em/2)+"em"});
$(".phormgrid_column_pad").css({"margin-left": (base_line_height_em/2)+"em", "margin-right": (base_line_height_em/2)+"em"});

$(".grid-bg .list3columns").css({"margin-bottom": "-"+(base_line_height_em)+"em"});
$(".grid-bg .list4columns").css({"margin-bottom": "-"+(base_line_height_em)+"em"});

$("body").css({"font-size": base_font+"px"});
$("body").css({"line-height": base_line_height_em+"em"});
$("p").css({"line-height": base_line_height_em+"em", "margin-bottom": base_line_height_em+"em"});
$("h1").css({"line-height": base_line_height_em+"em"});
$("h2").css({"line-height": base_line_height_em+"em"});
$("h3").css({"line-height": base_line_height_em+"em"});
$("h4").css({"line-height": base_line_height_em+"em"});
$("h5").css({"line-height": base_line_height_em+"em"});
$("h6").css({"line-height": base_line_height_em+"em"});
}



function setColumnPad() {
  var column_pad =($("input#column_pad").attr("value"));
$(".grid-pad").css({"margin-left": (column_pad/2)+"em", "margin-right": (column_pad/2)+"em"});
$(".grid-bg").css({"margin-left": 0,  "margin-right": 0, "padding-left": (column_pad/2)+"em", "padding-right": (column_pad/2)+"em"});
$(".phormgrid_column_pad").css({"margin-left": (column_pad/2)+"em", "margin-right": (column_pad/2)+"em"});
}
